/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-09-25 16:41:27
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-09-26 10:28:05
 * @FilePath: /react18-vite-admin/src/components/ui/SizeSelect/SizeSelect.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { FontSizeOutlined } from '@ant-design/icons';
import { Dropdown, DropdownProps } from 'antd';
import { useTranslation } from 'react-i18next';

import { useAppStore } from '@/store';

const SizeSelect = (props: { className: string }) => {
    const { className } = props;
    const { t } = useTranslation();
    const { size, setSize } = useAppStore((state) => state);

    const menu: DropdownProps['menu'] = {
        selectedKeys: [size],
        items: [
            {
                key: 'middle',
                label: t('sizeSelect.default'),
                onClick: () => setSize('middle')
            },
            {
                key: 'large',
                label: t('sizeSelect.large'),
                onClick: () => setSize('large')
            },
            {
                key: 'small',
                label: t('sizeSelect.small'),
                onClick: () => setSize('small')
            }
        ]
    };

    return (
        <Dropdown trigger={['click']} menu={menu}>
            <FontSizeOutlined className={className} />
        </Dropdown>
    );
};

export default SizeSelect;
